<template>
  <div class="sell-work">
    <div class="tip_list">
      <div class="tip_box">
          <div class="tip_title">已购入：</div>
          <div class="tip_msg">{{ tip_res.buyNum }}个</div>
      </div>
      <div class="tip_box">
          <div class="tip_title">总花费：</div>
          <div class="tip_msg">{{ tip_res.payPrice }}元</div>
      </div>
      <div class="tip_box">
          <div class="tip_title">已卖出：</div>
          <div class="tip_msg">{{ tip_res.sellNum }}个</div>
      </div>
      <div class="tip_box">
          <div class="tip_title">出售收入：</div>
          <div class="tip_msg">{{ tip_res.income }}元</div>
      </div>
    </div>
    <el-tabs :value="userTabValue" type="border-card" @tab-click="handleClick">
      <el-tab-pane :label="`订单记录「${buyNum || 0}」`" name="first" :lazy="true">
        <div>
          <div class="input-wrap">
            <div class="input-box">
                <span class="input-title" style="margin-left:0px;">类型</span>
                <el-select @change="typeChange" style="width:150px;" v-model="typeChangeVal">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="出售" :value="0"></el-option>
                    <el-option label="购买" :value="1"></el-option>
                </el-select>
            </div>
            <div class="input-box">
                <span class="input-title" style="margin-left:0px;">游戏</span>
                <el-select @change="gameChange" style="width:150px;" v-model="gameChangeVal">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="王者荣耀" :value="1104466820"></el-option>
                    <el-option label="和平精英" :value="1106467070"></el-option>
                </el-select>
            </div>
            <div class="input-box">
                <span class="input-title" style="margin-left:0px;">状态</span>
                <el-select @change="statusChange" style="width:150px;" v-model="statusChangeVal">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待支付" :value="0"></el-option>
                    <el-option label="取消订单" :value="1"></el-option>
                    <el-option label="待验号" :value="2"></el-option>
                    <el-option label="退款中" :value="3"></el-option>
                    <el-option label="售中退款" :value="4"></el-option>
                    <el-option label="换绑信息" :value="5"></el-option>
                    <el-option label="交易完成" :value="6"></el-option>
                    <el-option label="找回赔偿" :value="7"></el-option>
                    <!-- <el-option label="售后退款" :value="8"></el-option> -->
                </el-select>
            </div>
          </div>
          <div class="table-box">
            <el-table :data="tableData" ref="table" border style="width: 100%" @sort-change="sortChange">
                <el-table-column prop="orderNo" label="订单号">
                  <template slot-scope="scope">
                      <div class="link-blue" @click="goOrderDetail(scope.row.orderId)">{{ scope.row.orderNo }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="orderType" label="类型"></el-table-column>
                <el-table-column prop="gameName" label="游戏"></el-table-column>
                <el-table-column prop="accountVo" label="账号">
                  <template slot-scope="scope">
                      <div class="link-blue" @click="goQQDetails(scope.row)">QQ：<span>{{ scope.row.accountVo.accountNo }}</span></div>
                      <div>{{ scope.row.accountVo.serverName }}</div>
                      <div class="link-blue" @click="goUserDetail(scope.row.accountVo.userId)">号主：<span>{{ scope.row.accountVo.userId }}</span></div>
                  </template>
                </el-table-column>
                <el-table-column prop="buyerUserId" label="买家">
                  <template slot-scope="scope">
                      <span class="link-blue" @click="goUserDetail(scope.row.buyerUserId)">{{ scope.row.buyerUserId }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="sellPrice" sortable="custom" label="售价(元)"></el-table-column>
                <el-table-column prop="paymentPrice" sortable="custom" label="实付(元)"></el-table-column>
                <el-table-column prop="paymentTime" label="支付时间">
                  <template slot-scope="scope">
                      <div>{{ scope.row.paymentTime }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="状态"></el-table-column>
            </el-table>
          </div>
          <div class="tools">
              <el-pagination
                  @size-change="sizeChange"
                  @current-change="pageChange"
                  :current-page="pageNum"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="`浏览记录「${nums && nums.viewNum || 0}」`" :lazy="true">
        <LookRecord ref="LookRecord" />
      </el-tab-pane>
      <el-tab-pane :label="`筛选历史「${nums && nums.selNum || 0}」`" :lazy="true">
        <ShaiRecord />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import LookRecord from '@/views/quDeal/customerManage/components/lookRecord'
import ShaiRecord from '@/views/quDeal/customerManage/components/shaiRecord'

export default {
  components: {
    LookRecord,
    ShaiRecord
  },
  props: ['userId', 'nums', 'buyNum'],
  data () {
    return {
      tableData: [],
      typeChangeVal: '',
      gameChangeVal: '',
      statusChangeVal: '',
      pageNum: 1,
      pageSize: 10,
      loading: false,
      total: null,
      tip_res: {
        buyNum: 0,
        income: 0,
        payPrice: 0,
        sellNum: 0,
      },
      type: '',
      sort: '',
      userTabValue: 'first'
    }
  },
  created () {
    this.getList(1)
  },
  methods: {
    handleClick(tab) {
      let status = Number(tab.index)
      if (!status) {
        this.$refs.LookRecord.getAdviseCount()
        return
      }
      // if (status === 1) {
      //     this.$refs.BuyRecord.getAdviseCount()
      // }
    },
    // 后端排序
    sortChange ({ column, prop, order }) {
        this.sort = order || ''
        // 如果没有 sort prop 置为空
        if (this.sort === 'ascending') {
            this.sort = 'asc'
        } else {
            this.sort = 'desc'
        }
        this.type = prop
        this.getList(1)
    },
    // 查看订单详情
    goOrderDetail (orderId) {
        const { href } = this.$router.resolve({
            path: '/seller/tradOrderDetail',
            query: {
                orderId
            }
        })
        window.open(href, '_blank')
    },
    // 点击QQ账号 跳转到相应的 租号账号详情
    goQQDetails (item) {
        let path = `/seller/accTradingDetail?dataId=${item.dataId}`
        const { href } = this.$router.resolve({
            path
        })
        window.open(href, '_blank')
    },
    // 查看用户详情
    goUserDetail (id) {
        const { href } = this.$router.resolve({
            path: '/dataReport/userInfo',
            query: {
                id
            }
        })
        window.open(href, '_blank')
    },
    typeChange(val) {
      this.typeChangeVal = val
      this.getList(1)
    },
    gameChange(val) {
      this.gameChangeVal = val
      this.getList(1)
    },
    statusChange(val) {
      this.statusChangeVal = val
      this.getList(1)
    },
    async getList (pageNum) {
        if (this.loading) return
        this.pageNum = pageNum
        this.loading = true
        let params = {
            pageNumber: pageNum,
            pageSize: this.pageSize,
            gameId: this.gameChangeVal,
            orderStatus: this.statusChangeVal,
            orderType: this.typeChangeVal,
            userId: this.userId,
            sortType: this.sort,
            orderByType: this.type,
        }

        let res = await this.$http.get('/deal/userDealOrderList', {
            params
        })
        if (res.code === '0') {
            this.tableData = res.data.page.list
            this.tip_res = {
              buyNum: res.data.buyNum,
              income: res.data.income,
              payPrice: res.data.payPrice,
              sellNum: res.data.sellNum,
            }
            this.total = res.data.page.totalRow
        } else {
            this.$message({
                type: 'error',
                message: '系统异常，请稍后再试'
            })
        }
        this.loading = false
    },
    // 页码切换
        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getList(1)
        },

        // 页容切换
        pageChange (val) {
            this.pageNum = val
            this.getList(this.pageNum)
        },
  },
  mounted() {
    
  },
}
</script>
<style lang="scss" scoped>
  .link-blue {
    color: rgb(102, 177, 255); 
    font-weight: 500; 
    cursor: pointer;
  }
  .sell-work {
    margin-top: 10px;
    .tools {
        padding-right: 20px;
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
    .input-wrap {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .input-box {
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
        margin-right: 10px;
        .input-title {
            margin: 0 10px 0 20px;
        }
        .btn {
            margin-top: 10px;
            margin-left: 10px;
        }
    }
    .tip_list {
      display: flex;  
      border: solid 1px #dfdfdf;
      border-radius: 5px;
      padding: 10px 30px;
      margin-bottom: 20px;
      .tip_box {
        flex: 1;
        .tip_msg {
            font-size: 14px;
            font-weight: 500;
            color: #393939;
        }
        .tip_title {
            font-size: 12px;
            font-weight: 600;
            color: #9ba0b1;
            margin-bottom: 6px;
        }
      }
      
    }
    
  }
</style>
